{{--留言板专用模板--}}
@extends('theme.jishupucms.layouts.app')

{{-- head投放区域 --}}
@section('head-css-cast')
    @parent
@endsection
@section('head-js-cast')
    @parent
@endsection

{{-- seo --}}
@section('title', $meta['title'])
@section('keywords', $meta['keywords'])
@section('description', $meta['description'])

{{--body class--}}
@section('body-class', 'jsp-bg')

{{-- 核心内容 --}}
@section('content')
    @parent

    {{-- banner --}}
    <section class="jsp-banner-section">
        <x-carousel id="guestbook-banner" class="" :list="$ads"/>
    </section>

    {{-- 当前位置 --}}
    <x-breadcrumb :list="$breadcrumb" :class="empty($ads) || $ads->isEmpty() ?'jsp-navheight':''"/>

    {{-- 内容区域 --}}
    <section class="guestbook jsp-content-section container">

        <div class="left">
            <div class="content">
                <h1 class="title">{{$guestbookConfig['title']}}</h1>
                <form action="{{url('guestbook.html')}}" method="POST" class="was-validated" >
                    @csrf
                    @method('PUT')
                    <div class="form-row">
                        {{--姓名--}}
                        <div class="form-group col-md-4">
                            <label for="customer_name">{{__('guestbook.customer_name')}}</label>
                            <input type="text" class="form-control @error('customer_name') is-invalid @enderror"
                                   id="customer_name" aria-describedby="customer_nameFeedback" name="customer_name"
                                   placeholder="{{__('guestbook.customer_name_tips')}}" value="{{ old('customer_name') }}"
                                   required
                            >
                            @error('customer_name')
                                <div id="customer_nameFeedback" class="invalid-feedback">
                                    {{$message}}
                                </div>
                            @enderror
                        </div>
                        {{--联系电话--}}
                        <div class="form-group col-md-4">
                            <label for="customer_phone_number">{{__('guestbook.customer_phone_number')}}</label>
                            <input type="text"
                                   class="form-control  @error('customer_phone_number') is-invalid @enderror"
                                   id="customer_phone_number" aria-describedby="customer_phone_numberFeedback"
                                   name="customer_phone_number"
                                   placeholder="{{__('guestbook.customer_phone_number_tips')}}"
                                   value="{{ old('customer_phone_number') }}"
                                   pattern="^1[345789][0-9]{9}$"
                                   required
                            >
                            @error('customer_phone_number')
                                <div id="customer_phone_numberFeedback" class="invalid-feedback">
                                    {{$message}}
                                </div>
                            @enderror
                        </div>
                        {{--电子邮箱--}}
                        <div class="form-group col-md-4">
                            <label for="customer_email">{{__('guestbook.customer_email')}}</label>
                            <input type="email" class="form-control   @error('customer_email') is-invalid @enderror"
                                   id="customer_email" aria-describedby="customer_emailFeedback" name="customer_email"
                                   placeholder="{{__('guestbook.customer_email_tips')}}"
                                   value="{{ old('customer_email') }}"
                                   required
                            >
                            @error('customer_email')
                                <div id="customer_emailFeedback" class="invalid-feedback">
                                    {{$message}}
                                </div>
                            @enderror
                        </div>
                    </div>
                    {{--留言内容--}}
                    <div class="form-group">
                        <label for="message">{{__('guestbook.message')}}</label>
                        <textarea class="form-control    @error('message') is-invalid @enderror" id="message"
                                  aria-describedby="messageFeedback" name="message" rows="3"
                                  placeholder="{{__('guestbook.message_tips')}}"
                                  required
                        >{{ old('message') }}</textarea>
                        @error('message')
                            <div id="messageFeedback" class="invalid-feedback">
                                {{$message}}
                            </div>
                        @enderror
                    </div>
                    <div class="form-group d-inline-flex">
                        <input type="text" class="form-control   @error('vcode') is-invalid @enderror" id="vcode"
                               aria-describedby="vcodeFeedback" name="vcode"
                               placeholder="{{__('guestbook.vcode_tips')}}"
                               required
                        >
                        <img id="vcode_captcha" src="" class="ml-1 vcode d-none"
                             style="cursor:pointer;" alt="{{__('guestbook.vcode')}}"
                             title="{{__('guestbook.change_vcode')}}">
                        <input type="hidden" id="vcode_id" name="vcode_id" value="">
                    </div>
                    @error('vcode')
                    <div id="vcodeFeedback" class="invalid-feedback mb-3" style="display: block!important;margin-top:-1rem">
                        {{$message}}
                    </div>
                    @enderror
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary ">{{__('guestbook.submit')}}</button>
                    </div>

                </form>
            </div>
        </div>

    </section>

    {{--提交结果反馈--}}
    @if(session('status') !== null)
        <x-modal id="guestbookModal" :text-Style="session('status')?'success':'error'" :message="session('message')"/>
        <script>
            $('#guestbookModal').modal('show')
        </script>
    @endif

@endsection

{{-- 底部投放区域 --}}
@section('footer-cast')
    @parent
    <script type="text/javascript" src="{{config('jishupucms.js')}}/guestbook.js"></script>
@endsection
